<template>
  <view class="custom-swiper">
    <swiper
      class="swiper"
      circular
      easing-function="fade"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      @animationfinish="current = $event.detail.current"
    >
      <swiper-item v-for="({ url }, index) in banners" :key="index">
        <image
          class="swiper-item"
          mode="aspectFill"
          @click.stop="preview(index)"
          :src="url"
        ></image>
      </swiper-item>
    </swiper>
    <view class="indicator"> {{ current + 1 }}/{{ banners.length }} </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from "vue";

const props = defineProps({
  banners: {
    type: Array,
    default: () => [],
  },
});
const indicatorDots = false;
const autoplay = true;
const interval = 3000;
const duration = 700;

const current = ref(0);

const preview = (i) => {
  console.log(props.banners);

  uni.previewImage({
    // 预览时，默认显示图片的索引
    current: i,
    // 所有图片 url 地址的数组
    urls: props.banners.map((x) => x.url),
  });
};
</script>

<style lang="less" scoped>
.custom-swiper {
  position: relative;
  .indicator {
    width: 44px;
    text-align: center;
    color: white;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    right: 16px;
    bottom: 12px;
    font-size: 10px;
    z-index: 99;
    padding: 5px 0;
    border-radius: 30px;
  }
}
.swiper {
  height: 345px;
  position: relative;
  .swiper-item {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
  }
}
</style>
